<template>
  <div class="list">
    <header>
      <p><van-icon name="arrow-left" /></p>
      <div class="search">
        <span @click="$router.push('/citylist')">{{ city }}</span>
        <p><van-icon name="search" /></p>
        <input type="text" placeholder="请输入小区或地址" />
      </div>
      <i @click="goMap" class="icon iconfont icon-ditu"></i>
    </header>
    <main>
      <van-dropdown-menu class="ert">
        <van-dropdown-item title="区域" ref="item">
          <div class="zhongb">
            <van-picker title="标题" :columns="columns" />
            <!-- <za-select :data-source="area" @change="handleChange"> </za-select> -->
          </div>
          <div class="ttn">
            <p class="zuo-q">取消</p>
            <p class="you-q">确定</p>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item">
          <div class="zhongb">
            <van-picker title="标题" :columns="columns" />
            <!-- <za-select :data-source="area" @change="handleChange"> </za-select> -->
          </div>
          <div class="ttn">
            <p class="zuo-q">取消</p>
            <p class="you-q">确定</p>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <div class="zhongb">
            <van-picker title="标题" :columns="columns" />
            <!-- <za-select :data-source="area" @change="handleChange"> </za-select> -->
          </div>
          <div class="ttn">
            <p class="zuo-q">取消</p>
            <p class="you-q">确定</p>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item">
          <div class="zhongb">
            <van-picker title="标题" :columns="columns" />
            <!-- <za-select :data-source="area" @change="handleChange"> </za-select> -->
          </div>
          <div class="ttn">
            <p class="zuo-q">取消</p>
            <p class="you-q">确定</p>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="main_houselist">
        <dl
          v-for="v in houseList"
          :key="v.houseCode"
          @click="$router.push(`/details/${v.houseCode}`)"
        >
          <dt>
            <img :src="'http://47.102.145.189:8009' + v.houseImg" alt="" />
          </dt>
          <dd>
            <h3>{{ v.title }}</h3>
            <p>{{ v.desc }}</p>
            <p v-for="(item, index) in v.tags" :key="index">
              <span>{{ item }}</span>
            </p>
            <p>{{ v.price }}元/月</p>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      area: [],
      columns: [
        {
          text: "区域",
          children: [
            {
              text: "不限",
              children: [{ text: "西湖区" }, { text: "余杭区" }],
            },
            {
              text: "温州",
              children: [{ text: "鹿城区" }, { text: "瓯海区" }],
            },
          ],
        },
        {
          text: "地铁",
          children: [
            {
              text: "福州",
              children: [{ text: "鼓楼区" }, { text: "台江区" }],
            },
            {
              text: "厦门",
              children: [{ text: "思明区" }, { text: "海沧区" }],
            },
          ],
        },
      ],
      houseList: [],
      arr: {
        cityId: window.localStorage.getItem("cityId"),
        area: "",
        subway: "",
        rentType: "",
        price: "",
        more: "",
        roomType: "",
        oriented: "",
        characteristic: "",
        floor: "",
        start: "",
        end: "",
      },
    };
  },
  methods: {
    getCityArea() {
      this.$http
        .get("/houses/condition", {
          params: {
            id: window.localStorage.getItem("cityId"),
          },
        })
        .then((res) => {
          this.area = res.data.body.area;
          console.log(res.data.body);
        });
    },
    goMap() {
      this.$router.push("/map");
    },
    handleChange() {},
    getHouseLisr() {
      this.$http
        .get("/houses", {
          params: this.arr,
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.houseList = res.data.body.list;
          }
        });
    },
  },
  created() {
    this.city = localStorage.getItem("city");
    this.arr.rentType = this.$route.query.rentType;
    this.arr.start = this.$route.query.start;
    this.arr.end = this.$route.query.end;
    this.getHouseLisr();
    this.getCityArea();
  },
};
</script>

<style scoped>
.ttn {
  width: 100%;
  height: 50px;
  display: flex;
  margin-top: 20px;
  align-items: center;
  border-top: 1px solid #e9e9e9;
}
.ttn p:first-child {
  flex: 1 1;
  border-radius: 0;
  color: #21b97a;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
.ttn p:last-child {
  border-radius: 0;
  flex: 2 1;
  color: #fff;
  background-color: #21b97a;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
.list {
  width: 100%;
  height: auto;
}
.ert {
  position: sticky;
  top: 0;
}
.list header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #f6f5f6;
}
.zhongb {
  width: 100%;
  /* height: 238px; */
}
.main_houselist {
  width: 100%;
  height: auto;
}
.main_houselist dl {
  width: 100%;
  padding: 5px 10px;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.main_houselist dl dt {
  flex-shrink: 0;
  width: 120px;
  height: 100px;
  margin-right: 10px;
}
.main_houselist dl dt img {
  width: 100%;
  height: 100%;
}
.main_houselist dl dd {
  line-height: 28px;
}
.main_houselist dl dd h3 {
  font-size: 15px;
  color: #394043;
}
.main_houselist dl dd p:nth-child(2) {
  font-size: 12px;
  color: #afb2b3;
}
.main_houselist dl dd p:nth-child(3) {
  display: flex;
}
.main_houselist dl dd p:nth-child(4) {
  color: #fa5741;
  font-size: 12px;
}
.main_houselist dl dd p:nth-child(3) span {
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
  background: #39becd;
  color: #e1f5f8;
}
.list main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
.search {
  width: 85%;
  height: 30px;
  display: flex;
  text-align: center;
  line-height: 16px;
  padding: 8px;
  border-radius: 5px;
  background: #fff;
}
.search span {
  padding: 0px 5px;
  margin-right: 10px;
  border-right: 1px solid #888999;
}
.search input {
  border: 0;
  outline: none;
  flex: 1;
  margin-left: 5px;
}
</style>